<template>
	<view class="adoption">
		<view class="top" :style="{'paddingTop': topHeight}">
			<view class="nav df">
				<view class="title">
					认养选择
				</view>
				<view class="stepIndex">
					4/<span>{{index + 1}}</span>
				</view>
			</view>
			<view class="step">
				<u-steps :current="index" activeColor='#17CC77'>
					<u-steps-item title="选择地块"></u-steps-item>
					<u-steps-item title="租地配置"></u-steps-item>
					<u-steps-item title="签署合同"></u-steps-item>
					<u-steps-item title="在线支付"></u-steps-item>
				</u-steps>
			</view>
			<view class="h1"></view>
		</view>
		<Step1 v-if="index == 0" @step='step'></Step1>
		<Step2 v-if="index == 1" @step='step'></Step2>
		<Step3 v-if="index == 2" @step='step'></Step3>
		<Step4 v-if="index == 3" @step='step'></Step4>
		<!-- <uni-tabbar></uni-tabbar> -->
	</view>
</template>

<script>
	import Step1 from './components/step1.vue'
	import Step2 from './components/step2.vue'
	import Step3 from './components/step3.vue'
	import Step4 from './components/step4.vue'
	import{ insertTenancy } from '@/api/api.js'
	export default {
		components: {
			Step1,
			Step2,
			Step3,
			Step4,
		},
		data() {
			return {
				formData:{
					details:[],
					tenancyDuration:'',
					tenancyNum:'',
					rent:'',
					fosterName:'',
					phone:'',
					idNumber:'',
					contractPicture:'',
				},
				index: 0,
				topHeight: '',
				list: [{
						title: 'a1',
						area: '10平方',
						type: '1'
					},
					{
						title: 'b1',
						area: '10平方',
						type: '0'
					},
					{
						title: 'c1',
						area: '10平方',
						type: '1'
					},
					{
						title: 'd1',
						area: '10平方',
						type: '0'
					},
					{
						title: 'e1',
						area: '10平方',
						type: '1'
					},
				]
			}
		},
		onShow() {
			this.topHeight = uni.getStorageSync('height') + 'px'
		},
		onLoad() {
			
		},
		methods: {
			step(i) {
				console.log(i);
				this.index = i.index
				if(i.index == 2){
					this.formData = i.formData ? i.formData:this.formData
				}else if(i.index == 3){
					this.formData.contractPicture = i.imageURL 
					this.Step3SaveFormData(this.formData)
				}
				console.log('当前表单',this.formData);
			},
			async Step3SaveFormData(params){
				let account = uni.getStorageSync("account")
				console.log(account);
				const res = await insertTenancy(params,account.token)
				console.log("res:",res);
				uni.$emit("landId",res.data.data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.adoption {
		.h1 {
			width: 750rpx;
			height: 1rpx;
			background: rgba(0, 0, 0, 0.12);
		}

		.df {
			display: flex;
		}

		.top {
			background-color: #fff;
			padding-top: 1rpx !important;
			// padding-bottom: 30rpx;
			// box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			// border-radius: 0rpx 0rpx 36rpx 36rpx;
			// margin-bottom: 30rpx;

			.nav {
				margin-top: 20rpx;
				margin-left: 58rpx;
				width: 500rpx;
				justify-content: space-between;
				font-size: 36rpx;
				color: #1D1D1D;
				margin-bottom: 50rpx;

				.title {}

				.stepIndex {
					span {
						color: #17CC77;
					}
				}
			}

			.step {
				margin-bottom: 28rpx;
			}

		}

		.bottom {
			padding: 30rpx;
			padding-top: 0;

			.tt {
				height: 68rpx;
				margin-bottom: 30rpx;
				font-size: 32rpx;
				color: #282828;
				justify-content: space-between;

				.tt-left {
					width: 200rpx;
					line-height: 68rpx;
					text-align: center;
				}

				.tt-mid {
					// margin-left: 60rpx;
					line-height: 68rpx;
					// margin-right: 160rpx;
				}

				.tt-right {
					width: 168rpx;
					height: 68rpx;
					background: rgba(27, 196, 109, 0.1);
					border-radius: 34rpx;
					border: 2rpx solid #1BC46D;
					text-align: center;
					line-height: 68rpx;
					color: #1BC46D;
				}
			}

			.list {
				.list-right {
					.vfor {
						width: 650rpx;
						height: 232rpx;
						padding: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						position: relative;
						margin-bottom: 20rpx;

						.vfor-left {
							margin-right: 20rpx;
							width: 232rpx;
							height: 232rpx;
						}

						.vfor-right {
							.vfor-title {
								color: #17CC77;
								font-size: 36rpx;
								margin-bottom: 36rpx;
							}

							.text {
								font-size: 30rpx;
								color: #1D1D1D;
								margin-bottom: 60rpx;
							}

							.type {
								font-size: 30rpx;
								color: #17CC77;
							}

							.activeType {
								color: #FA680A;
							}

						}

						.left-poa {
							position: absolute;
							top: 50%;
							right: 20rpx;
							margin-top: -22rpx;
							width: 40rpx;
							height: 40rpx;
							background: rgba(23, 204, 119, 0.06);
							border-radius: 8rpx;
							border: 2rpx solid #17CC77;
							overflow: hidden;

							image {
								margin-top: -2rpx;
								margin-left: -2rpx;
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
				}
			}

		}
	}
</style>